<style lang="less">
@import "./home.less";
</style>
<template>
  <div class="page-box-row-left home-page">
    <FormBlock
      class="leftBlock"
      :title="$t('module.home.basicInfor')"
      direction="column"
      style="width:400px"
    >
      <div class="left-infor">
        <Row class="margin-top-8">
          <Col span="8">
            <p class="notwrap left-content">{{$t('module.home.account')}}</p>
          </Col>
          <Col span="16" class="padding-left-8 right-content nameContent">{{user.userName}}</Col>
        </Row>
        <Row class="margin-top-8">
          <Col span="8">
            <p class="notwrap left-content">{{$t('module.home.loginTime')}}</p>
          </Col>
          <Col
            span="16"
            class="padding-left-8 right-content"
          >{{userInfor.lastLoginTime ? userInfor.lastLoginTime : '--'}}</Col>
        </Row>
        <Row class="margin-top-8">
          <Col span="8">
            <p class="notwrap left-content">{{$t('module.home.lastLoginIP')}}</p>
          </Col>
          <Col
            span="16"
            class="padding-left-8 right-content"
          >{{userInfor.lastLoginAddress ? userInfor.lastLoginAddress : '--'}}</Col>
        </Row>
      </div>
    </FormBlock>
    <FormBlock
      style="position:relative;"
      class="rightBlock"
      :title="$t('module.home.todoList')"
      direction="column"
    >
      <Icon class="addIcon" type="md-add" @click="addData"></Icon>
      <el-table
        ref="itemTable"
        @select="handleSelectionChange"
        :data="tableData"
        border
        stripe
        style="width: 100%;"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" :label="$t('module.home.itemName')">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.edit"
              v-model="scope.row.todoName"
              :placeholder="$t('module.home.enterItemName')"
            ></el-input>

            <span
              :class="{hasDid: scope.row.status == 1,isExpired:scope.row.isExpired && scope.row.status == 0}"
              v-else
            >{{scope.row.todoName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="160px"
          prop="sex"
          :label="$t('module.home.createTime')"
        >
          <template slot-scope="scope">
            <el-input :disabled="true" v-if="scope.row.edit" v-model="scope.row.startTime"></el-input>
            <span
              :class="{isExpired:scope.row.isExpired && scope.row.status == 0}"
              v-else
            >{{scope.row.startTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="160px"
          prop="sex"
          :label="$t('module.home.plannedTime')"
        >
          <template slot-scope="scope">
            <DatePicker
              v-if="scope.row.edit"
              v-model="scope.row.expireTime"
              type="date"
              format="yyyy-MM-dd"
              :transfer="true"
              ref="vsiEndDate"
              
              :editable="false"
              :clearable="false"
              :placeholder="$t('module.home.selectTime')"
            ></DatePicker>
            <span
              :class="{isExpired:scope.row.isExpired && scope.row.status == 0}"
              v-else
            >{{scope.row.expireTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="80px" :label="$t('module.home.action')">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.edit"
              type="text"
              size="medium"
              @click="confirmAdd(scope.row)"
            >
              <i style="font-size:20px;color:#828282;" class="el-icon-check" aria-hidden="true"></i>
              <!-- <i class="el-icon-close" aria-hidden="true"></i> -->
            </el-button>
            <el-button
              v-if="scope.row.edit"
              type="text"
              size="medium"
              @click="cancle(scope.row,scope.$index)"
            >
              <!-- <i class="el-icon-check" aria-hidden="true"></i> -->
              <i style="font-size:20px;color:#828282;" class="el-icon-close" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <el-button
                v-if="scope.row.status == 0"
                type="text"
                size="medium"
                @click="editData(scope.row,scope.$index)"
              >
                <!-- <i class="el-icon-edit" aria-hidden="true"></i> -->
                <Icon style="font-size:20px;color:#828282;" type="md-create" />
              </el-button>
              <el-button
                v-else
                type="text"
                size="medium"
                @click="deleteData(scope.row,scope.$index)"
              >
                <!-- <i class="el-icon-delete" aria-hidden="true"></i> -->
                <Icon style="font-size:20px;color:#828282;" type="ios-trash" />
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <RPButton optType="create" @click="addData" /> -->
    </FormBlock>
  </div>
</template>
<script>
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";
import { addList, getList, deleteList, getInfor } from "@/api/homeApi.js";
export default {
  mixins: [locales],
  data() {
    return {
      tableData: [],
      userInfor: {}
    };
  },
  computed: {
    user() {
      return this.$store.state[CoreModuleName].userInfo;
    }
  },
  created() {},

  mounted() {
    this.getList();
    this.getInfor();
  },
  methods: {
    // 获取个人信息
    async getInfor() {
      let res = await getInfor();
      this.userInfor = res.data;
    },
    // 获取事项列表
    getList() {
      getList({})
        .then(res => {
          this.tableData = res.data;
          this.tableData.forEach((item, index) => {
            // item.edit = false
            if (item.status == 1) {
              this.$nextTick(() => {
                this.$refs.itemTable.toggleRowSelection(this.tableData[index], true);
              });
            }
          });
        })
        .catch(data => {});
    },
    // 时间转换
    getTime(time) {
      const d = new Date(time);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1) + "-" + this.p(d.getDate());
      // const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
      return resDate;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    handleSelectionChange(val, row) {
      row.status = row.status == 0 ? 1 : 0;
      addList(row)
        .then(res => {
          this.getList();
        })
        .catch(data => {});
    },
    //添加
    addData() {
      this.tableData.unshift({
        edit: true,
        startTime: new Date()
          .toISOString()
          .replace(/T.*/, " ")
          .trim()
      });
    },
    // 取消
    cancle(row, index) {
      if (row.id) {
        let time = JSON.parse(JSON.stringify(row.expireTime));
        row.edit = false;
        this.tableData.splice(index, 1);
        this.tableData.splice(index, 0, row);
        row.expireTime = time ? this.getTime(time).trim() : time;
        this.getList();
        return;
      }
      this.tableData.shift();
    },
    //确认添加
    confirmAdd(row) {
      if (row.id) {
        row.edit = false;
      } else {
        row.status = 0;
      }
      row.expireTime = row.expireTime ? this.getTime(row.expireTime).trim() : row.expireTime;
      addList(row)
        .then(res => {
          row.edit = false;
          this.getList();
        })
        .catch(data => {});
    },
    //修改
    editData(row, index) {
      this.$set(row, 'edit', true)
    },
    //删除
    deleteData(row, index) {
      let arr = [];
      arr.push(row.id);
      this.$confirm.warning(this.$t("common.confirmDeletion")).then(() =>
        deleteList(arr)
          .then(res => {
            this.getList();
            // this.tableData.splice(index, 1);
          })
          .catch(data => {})
      );
    }
  }
};
</script>
<style lang="less">
.home-page {
  .left-infor {
    padding: 0px 30px;
    .left-content {
      font-size: 14px;
      color: #333333;
    }
    .right-content {
      font-size: 14px;
      color: #666666;
    }
    .nameContent {
      color: #ffb403;
    }
  }
  .hasDid {
    text-decoration: line-through;
    color: gray;
    font-weight: 100;
  }
  .leftBlock .form-block-title {
    background-color: #ffbb00;
    color: white;
  }
  .rightBlock .form-block-title {
    background-color: #1fcbae;
    color: white;
  }
  .isExpired {
    color: red !important;
  }
  .addIcon {
    position: absolute;
    right: 15px;
    top: 14px;
    font-size: 20px;
    color: white;
  }
  .has-gutter .cell .el-checkbox__inner {
    visibility: hidden;
  }
  .has-gutter .el-table_1_column_1 {
    background-color: #fafafa;
  }
  .has-gutter .el-table_1_column_2 {
    background-color: #fafafa;
  }
  .has-gutter .el-table_1_column_3 {
    background-color: #fafafa;
  }
  .has-gutter .el-table_1_column_4 {
    background-color: #fafafa;
  }
  .has-gutter .el-table_1_column_5 {
    background-color: #fafafa;
  }
}
</style>
